<template>
  <view class="FsetcheckinStyle">
    <view class="page-container" :style="listHeightStylePage">
      <!-- 导航栏 -->
      <u-navbar title="极速打卡" placeholder @leftClick="back" :border="false" :shadow="true"></u-navbar>

      <view style="padding: 20rpx" :style="listHeightStyle">

        <view class="Fastprompt">
            <view class="FastpromptICon">
              <up-icon name="info-circle" color="#f2ab47" size="24"></up-icon>
            </view>

            <view>
              考勤管理员开启人脸/拍照打卡，由于暂不支持同时使用极速打卡，你的极速打卡设置已失效
            </view>
        </view>


        <view class="fastcheckin-info">
          <image class="fastcheckin-image" src="@/static/workspace/jisudaka.png"></image>
          <view class="fastcheckin-text">
            上下班时间范围内，进入可打卡范围，打卡绿港云即可自动打卡
          </view>
        </view>



        <view class="Chatsettings-function">
          <view class="function-item">
            <view class="function-left">
              <text>上班极速打卡</text>
            </view>
            <view class="function-right">
              <up-switch v-model="sMessagefree" @change="sMessagefreeChange"/>
            </view>
          </view>
        </view>


        <view class="Chatsettings-function">
          <view class="function-item">
            <view class="function-left">
              <text>下班极速打卡</text>
            </view>
            <view class="function-right">
              <up-switch v-model="xMessagefree" @change="xMessagefreeChange"/>
            </view>
          </view>
        </view>
      </view>
    </view>

    <up-modal :show="show" :title="title" :content='content' @confirm="Faceconfirm"></up-modal>

  </view>
</template>

<script>
export default {
  data(){
    return {
      content:'公司已开启人脸识别打卡，无法同时使用极速打卡',
      title:'',
      show:false,
      listHeight: 0, // 动态计算的高度
      listHeightStyle: {}, // 动态计算的样式
      appHeight: null,
      topHeight: 0,
      listHeightStylePage: {},
      sMessagefree:false,
      xMessagefree:false
    }
  },
  created() {
    this.appHeight = uni.getSystemInfoSync();
    this.topHeight = this.appHeight.screenHeight;

    // #ifdef H5
    this.listHeightStylePage = {
      height: `${window.innerHeight}px`,
    };
    // #endif

    // #ifdef APP-PLUS
    this.listHeightStylePage = {
      height: `${this.topHeight}px`,
    };
    // #endif



    this.calculateListHeight();
  },
  methods: {
    calculateListHeight() {
      const windowHeight = window.innerHeight; // 视口高度
      const navbarHeight = 7; // 导航栏高度（假设为 44px）
      const tabsHeight = 88;
      // #ifdef APP-PLUS
      this.listHeightStyle = {
        height: `${this.topHeight - 122}px`,
        overflowY: 'hidden'
      };
      // #endif

      // #ifdef H5
      const listHeight = windowHeight - navbarHeight - tabsHeight;
      this.listHeightStyle = {
        height: `${listHeight}px`,
        overflowY: 'hidden'
      };
      // #endif
    },
    Faceconfirm(){
      this.show = false
    },
    sMessagefreeChange(e){
      this.sMessagefree = false
      this.show = true
    },
    xMessagefreeChange(){
      this.xMessagefree = false
      this.show = true
    },
    back(){
      uni.navigateBack();
    }

  },
}
</script>

<style scoped lang="scss">
.FsetcheckinStyle{
  background-color: #f3f4f5;

  .page-container {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }


  .Fastprompt{
    height: 80rpx;
    background-color: #fbf2e0;
    padding: 20rpx;
    border-radius: 20rpx;
    font-size: 28rpx;
    color: #f2ab47;
    display: flex;

    .FastpromptICon{
      margin-top: 13rpx;
      margin-right: 15rpx;
    }
  }

  .fastcheckin-info {
    border-radius: 20rpx !important;
    background-color: #eef0f4;
    margin-top: 30rpx;
    text-align: center;
    margin-bottom: 30rpx;
    .fastcheckin-image {
      border-radius: 20rpx !important;
      width: 400rpx;
      height: 120rpx;
      margin: 30rpx auto 20rpx;
    }

    .fastcheckin-text {
      border-radius: 0rpx 0rpx 20rpx 20rpx !important;
      padding: 10rpx;
      background-color: #ffffff;
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }


  .Chatsettings-function {
    margin-top: 30rpx;
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 0 20rpx;
    margin-bottom: 30rpx;
    .function-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 25rpx 0;

      &:last-child {
        border-bottom: none;
      }

      .function-left {
        font-size: 28rpx;
        color: #333;
      }

      .function-right {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #666;

        .arrow-icon {
          margin-left: 10rpx;
          :deep(.u-icon__icon) {
            font-size: 24rpx;
          }
        }
      }
    }
  }


}

</style>
